<script setup>
  import { onMounted, ref, reactive, computed } from 'vue'
  import { onLoad, onShow } from '@dcloudio/uni-app'
  import { http } from '@/utils/http.js'
  import { parseTime } from '@/utils/index.js'
  import Api from './api/index.js'
  const __Api = new Api()
  import { useUsercodeStore } from '@/store/usercode.js'

  function goBack() {
    console.log(1)
    uni.navigateBack()
  }

  const data = ref([])
  function Init() {
    __Api
      .getRuleDetails({
        id: 11,
      })
      .then((res) => {
        data.value = res.data.details
      })
  }
  onLoad((options) => {
    Init()
  })
  onShow(() => {})
</script>

<template>
  <view class="warp">
    <view class="war-top">
      <view class="war-back" @click="goBack">
        <view class="back-aim"> </view>
      </view>
    </view>
    <view class="top_box">
      <image
        class="topBg"
        src="https://ojqn.wm2177.com/wechat_imgs/gold/top-bg.jpg"
        mode="widthFix"
      ></image>

      <!-- 背包 -->
    </view>
    <view class="rulepopup-content">
      <view class="" v-html="data"> </view>
    </view>
    <view class="content">
      <image
        style="width: 100%"
        src="https://ojqn.wm2177.com/wechat_imgs/gold/bottom-bg.png"
        mode="widthFix"
      ></image>
      <!-- transform: rotate(30deg); -->
    </view>
  </view>
</template>
<style lang="less" scoped>
  .war-top {
    padding-left: 18rpx;
    position: fixed;
    z-index: 99999;
    top: 88rpx;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-sizing: border-box;
    .war-back {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 57rpx;
      height: 57rpx;
      background-color: rgba(7, 1, 53, 0.5);
      border-radius: 50%;

      .back-aim {
        width: 20rpx;
        height: 20rpx;
        border-top: 4rpx solid #fff;
        border-left: 4rpx solid #fff;
        transform: rotate(-45deg);
      }
    }
  }
  .warp {
    width: 750rpx;
    height: 100vh;
    overflow: hidden;
    .top_box {
      position: relative;

      .topBg {
        width: 750rpx;
      }
    }
    .content {
      position: relative;
      width: 750rpx;
    }
  }

  image {
    display: block;
    vertical-align: bottom; /* 或者使用 top 或 middle，根据需求 */
  }
  .rulepopup-content {
    width: 626rpx;
    height: 900rpx;
    background-image: url('https://ojqn.wm2177.com/wechat_imgs/gold/rule-popup.png'); /* 替换为你的图片路径 */
    background-size: 100%;
    position: relative;
    box-sizing: border-box;
    position: fixed;
    z-index: 1000;
    left: 50%;
    margin-left: -313rpx;
    top: 300rpx;
    padding: 20rpx 30rpx;
    .content {
      padding: 10rpx 30rpx;
      box-sizing: border-box;
    }

    // https://ojqn.wm2177.com/wechat_imgs/gold/rule-popup.png
  }
</style>
